<script lang="ts" setup>
import { reactive } from 'vue'
import { login } from '../../api/login'
import router from '../../router'
import { useStorage } from '../../compositions/useStorage'

const form = reactive({
   username: '',
   password: ''
})

const token = useStorage<{ token: string }>('token')

const onSubmit = async () => {
   const res = await login(form)
   token.token = res.data.token
   router.push({ name: 'home' })
}
</script>

<template>
   <el-card class="absolute -translate-x-2/4 left-1/2 top-40">
      <template #header>
         <div class="card-header">
            <span>管理员登录</span>
         </div>
      </template>
      <el-form :model="form" label-width="auto">
         <el-form-item label="用户名">
            <el-input v-model="form.username" />
         </el-form-item>
         <el-form-item label="密码">
            <el-input type="password" v-model="form.password" />
         </el-form-item>
         <el-form-item>
            <el-button type="primary" size="large" @click="onSubmit">登录</el-button>
         </el-form-item>
      </el-form>
   </el-card>
</template>
